<template>
	<view class="flex mb-2 flex-wrap">
		<view class="flex-a-j mb-2 flex-wrap position-relative" v-for="(item,index) in imageList" :key="index" style="width: 230rpx;height: 230rpx;">
			<image @click="previewImage(item)" class="rounded" :src="item"  style="width: 210rpx;height: 210rpx;"></image>
			<view class="rounded position-absolute flex-a-j" style="right: 10rpx;top: 10rpx;background-color: rgba(0,0,0,0.3);width: 45rpx;">
				<text  @click="deleteImage(index)" class="iconfont py-1 text-white font-sm">&#xe620;</text>
			</view>
		</view>
		
		<view v-if="imageList.length<9" class="flex-a-j" @click="chooseImage" style="width: 230rpx;height: 230rpx;">
			<view  class="rounded page-color flex-a-j" style="width: 210rpx;height: 210rpx;">
				<image  style="width: 80rpx;height: 80rpx;" src="/static/add2.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import $R from "@/common/free-lib/request.js"
	export default {
		props:{
			count:{
				type:Number,
				default:9
			},
			data:{
				type:Array,
				default:()=>[]
			}
		},
		data(){
			return{
				imageList:[],
			}
		},
		mounted() {
			this.imageList = this.data
		},
		methods: {
			//预览照片
			previewImage(item){
				uni.previewImage({
					current:item,
					urls:this.imageList
				})
			},
			//选择照片
			chooseImage(){
				let i = this.count-this.imageList.length
				
				uni.chooseImage({
					count:i,
					sizeType:['compressed'],
					success:(e)=>{
						 e.tempFilePaths.forEach(path=>{
							 $R.upload('/upload',{
								 filePath:path
							 },(progress)=>{
								  // console.log('上传进度'+progress)
							 }).then(url=>{
								 this.imageList.push(url)
							 }).catch(err=>{
								 
							 })
						 })
						 this.$emit('update',this.imageList)
					}
				})
			},
			//删除照片
			deleteImage(index){
				uni.showModal({
					
					content: '是否要删除该图片?',
					showCancel: true,
					cancelText: '是',
					confirmText: '否',
					success: res => {
						if(!res.confirm){
							this.imageList.splice(index,1)
						}
					},
					
				});
			}
			
		}
	}
</script>

<style>
</style>
